<template>
  <div class="main-box" ref="mainBox">
    <el-select v-model="selectedBox" @change="handleChange" style="position: absolute;right:120px;z-index: 5" placeholder="请选择设备">
      <el-option label="全部" value="1"></el-option>
      <el-option label="锁柜" value="2"></el-option>
      <el-option label="物资柜" value="3"></el-option>

    </el-select>
    <div class="canvas-container" ref="containBox"></div>
    <div style="width:250px;background: #EEEEEE;display:flex;justify-content:flex-end;position: relative;left:82%;bottom: 100px" >
      <el-button @click="handleConfirm">确认</el-button>

    </div>
  </div>


</template>

<script>
import Konva from 'konva';

export default {
  name: "MainView",
  data() {
    return {
      stage: null,
      layer: null,
      selectedBox:null,
      elements:[]
    };
  },
  watch: {
    selectedBox:{
      handler(newval) {
        console.log(newval,'selectedBox')
        // this.init()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();

    });
  },
  methods: {
    handleChange(val){
      this.selectedBox = val;
      console.log(this.selectedBox,'获取的下拉');
    },
    init() {
      const containBox = this.$refs.containBox;

      // 创建舞台
      this.stage = new Konva.Stage({
        width: 1600,
        height: 750,
        container: containBox,
      });

      // 创建图层
      this.layer = new Konva.Layer();

      // 创建背景图片元素
      const bgImage = new Image();
      bgImage.src = require('@/assets/bg.png'); // 替换成你图片的实际路径

      // 当图片加载完成时，创建 Konva.Image 并将其添加到图层
      bgImage.onload = () => {
        const konvaImage = new Konva.Image({
          x: 200, // 图片的X坐标
          y: 50, // 图片的Y坐标
          image: bgImage,
          width: 850, // 图片的宽度
          height: 650, // 图片的高度
          draggable: false
        });

        this.layer.add(konvaImage);
        this.layer.draw(); // 重新绘制图层，确保图片显示
      };

      // 多次添加电箱
      this.addImageToLayer('电箱b (1).svg',790,80,40,40)
      this.addImageToLayer('电箱b (1).svg',340,300,40,40)
      this.addImageToLayer('电箱b (1).svg',550,230,40,40)
      // 多次添加物资柜子
      this.addImageToLayer('柜子 (1).svg',720,500,50,50)
      this.addImageToLayer('柜子 (1).svg',720,230,50,50)
      this.addImageToLayer('柜子 (1).svg',958,400,50,50)

      // 初始化图层
      this.stage.add(this.layer);

      // 添加鼠标滚轮缩放功能
      this.stage.on('wheel', (e) => {
        e.evt.preventDefault();

        const scaleBy = 1.05; // 缩放因子
        const oldScale = this.stage.scaleX(); // 获取当前缩放比例
        const pointer = this.stage.getPointerPosition(); // 获取鼠标位置

        const mousePointTo = {
          x: (pointer.x - this.stage.x()) / oldScale,
          y: (pointer.y - this.stage.y()) / oldScale,
        };

        // 根据滚轮滚动的方向决定缩放
        const newScale = e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

        this.stage.scale({ x: newScale, y: newScale });

        const newPos = {
          x: pointer.x - mousePointTo.x * newScale,
          y: pointer.y - mousePointTo.y * newScale,
        };
        this.stage.position(newPos);
        this.stage.batchDraw();
      });

      this.stage.on('mousedown', function() {
        this.stage.container().style.cursor = 'move';
      }.bind(this));

      this.stage.on('mouseup', function() {
        this.stage.container().style.cursor = 'default';
      }.bind(this));
      this.stage.draggable(false);

    },
    updateCanvas() {
      // 清空现有元素
      this.layer.destroyChildren();

      // 根据 selectedBox 的值重新添加元素
      if(this.selectedBox === '1'){
        this.addBgImageToLayer('bg.png',200,50,850,650)
        this.addImageToLayer('电箱b (1).svg', 790, 80, 40, 40);
        this.addImageToLayer('电箱b (1).svg', 340, 300, 40, 40);
        this.addImageToLayer('电箱b (1).svg', 550, 230, 40, 40);
        this.addImageToLayer('柜子 (1).svg', 720, 500, 50, 50);
        this.addImageToLayer('柜子 (1).svg', 720, 230, 50, 50);
        this.addImageToLayer('柜子 (1).svg', 958, 400, 50, 50);
      }else if (this.selectedBox === '2') { // 显示锁柜相关元素
        this.addBgImageToLayer('bg.png',200,50,850,650)
        this.addImageToLayer('电箱b (1).svg', 790, 80, 40, 40);
        this.addImageToLayer('电箱b (1).svg', 340, 300, 40, 40);
        this.addImageToLayer('电箱b (1).svg', 550, 230, 40, 40);

      } else if (this.selectedBox === '3') { // 显示物资柜相关元素
        this.addBgImageToLayer('bg.png',200,50,850,650)
        this.addImageToLayer('柜子 (1).svg', 720, 500, 50, 50);
        this.addImageToLayer('柜子 (1).svg', 720, 230, 50, 50);
        this.addImageToLayer('柜子 (1).svg', 958, 400, 50, 50);

      }


      // 绘制图层
      this.layer.draw();
    },
    // 创建并添加图片到Konva层的函数
    addImageToLayer(src, x, y,w,h) {
      const img = new Image();
      img.src = require(`@/assets/svg/${src}`);
      img.onload = () => {
        const konvaImage = new Konva.Image({
          x: x,
          y: y,
          image: img,
          width: w,
          height: h,
          draggable: false
        });

        this.layer.add(konvaImage);
        this.elements.push(konvaImage); // 存储元素以备后续操作
        console.log(this.elements);
        this.layer.draw();
      };
    },
  //   添加背景
    addBgImageToLayer(src, x, y, w, h) {
        const img = new Image();
        img.src=require(`@/assets/${src}`);
        img.onload = () => {
          const konvaImage = new Konva.Image({
            x:x,
            y:y,
            image:img,
            width:w,
            height:h,
            draggable:false
          })
          this.layer.add(konvaImage)
          this.layer.draw()
        }
    },

  // 确认
    handleConfirm(){
      // 更新画布上的元素
      this.updateCanvas();
    }

  }

};
</script>

<style scoped src="./Case3Demo.css"></style>









